<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
      <el-card style="max-width: 900px">
        <div id="main" style="width: 700px; height: 450px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
      <el-card style="max-width: 900px">
        <div id="main2" style="width: 700px; height: 450px;"></div>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup>
import * as echarts from 'echarts';
import adminApi from "@/api/adminApi.js";

//图1
function chart01() {
  adminApi.selectOrderByDay()
      .then(resp => {
        let day = new Array();
        let count = new Array();
        for (let index = 0; index < resp.data.length; index++) {
          day.push(resp.data[index].day);
          count.push(resp.data[index].count);
        }
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
          title: {
            text: '每日订单数量',
            subtext: '/个',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: day,
            axisLine:{
              lineStyle: {
                color: '#000'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: count,
              type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
}
//图2
function chart02() {
  adminApi.selectCategoryTop5()
      .then(resp => {
        let name = new Array();
        let count = new Array();
        for (let index = 0; index < resp.data.length; index++) {
          name.push(resp.data[index].name);
          count.push(resp.data[index].count);
        }
        var myChart = echarts.init(document.getElementById('main2'));
        var option = {
          title: {
            text: '分类前五的商品数量统计',
            subtext: '/件',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '商品数量',
              type: 'pie',
              radius: '50%',
              data: [
                {value:count[0],name:name[0]},
                {value:count[1],name:name[1]},
                {value:count[2],name:name[2]},
                {value:count[3],name:name[3]},
                {value:count[4],name:name[4]}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
}
chart02();
chart01();
</script>

<style scoped>
.el-row {
  margin-bottom: 30px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>